<!--
 * @Author: chenjianxin
 * @Date: 2020-07-13 20:06:22
 * @LastEditTime: 2020-11-12 16:35:12
 * @LastEditors: ganxiaochuan
 * @Description: 描述
 * @FilePath: \ui-standard\src\pages\demo\index.vue
--> 
<template>
  <div class="table-wrap">
    <!-- 表格模块 -->
    <table-wrap ref="table" :showSelect="false" :data="tableData" :columns="columns" class="table-wrap">
      <!-- 每个列都有单独的插槽，插槽名字为该列的prop,以下两个为案例，不写的时候默认显示纯文字 -->
      <!-- 序号 -->
      <template v-slot:sort="{scope}">
        <el-input-number v-model="scope.row.sort"></el-input-number>
      </template>
      <!-- 字段名称 -->
      <!-- 显示头部 -->
      <template v-slot:isDisplayHeader="{scope}">
        {{scope.column.label}}
        <el-switch v-model="batchIsDisplay" @change="(value) => {
          batchEvent(value, 'isDisplay')
        }"></el-switch>
      </template>
      <!-- 显示 -->
      <template v-slot:isDisplay="{scope}">
        <el-switch v-model="scope.row.isDisplay"></el-switch>
      </template>
      <!-- 必填 -->
      <template v-slot:isRequiredHeader="{scope}">
        {{scope.column.label}}
        <el-switch v-model="batchIsRequired" @change="(value) => {
          batchEvent(value, 'isRequired')
        }"></el-switch>
      </template>
      <template v-slot:isRequired="{scope}">
        <el-switch v-model="scope.row.isRequired"></el-switch>
      </template>
      <!-- 提示信息（中文） -->
      <template v-slot:zhInfo="{scope}">
        <el-input v-model="scope.row.zhInfo"></el-input>
      </template>
      <!-- 提示信息（英文） -->
      <template v-slot:enInfo="{scope}">
        <el-input v-model="scope.row.enInfo"></el-input>
      </template>
    </table-wrap>
  </div>
</template>
<script>
import TableWrap from './AppTable'
import mixinTable from '../mixins/table'
import '../assets/styles/mixin.scoped.less'

export default {
  mixins: [mixinTable],
  components: {
    TableWrap,
  },
  computed: {
  },
  data () {
    return {
      batchIsDisplay: false,
      batchIsRequired: false,
      columns: [
        {
          props: 'sort',
          label: '序号',
          minWidth: '150px',
        },
        {
          props: 'columnName',
          label: '字段名称',
          minWidth: '150px',
        },
        {
          props: 'isDisplay',
          label: '显示',
          minWidth: '150px',
        },
        {
          props: 'isRequired',
          label: '必填/非必填',
          minWidth: '150px',
        },
        {
          props: 'zhInfo',
          label: '提示信息(中文)',
          minWidth: '150px',
        },
        {
          props: 'enInfo',
          label: '提示信息(英文)',
          minWidth: '150px',
        }
      ],
      tableData: [
      ]
    }
  },
  methods: {
    /**
     * @function 设置表格数据
     * @param {Array} tableData 表格数据
     */
    setTableData(tableData) {
      this.tableData = tableData
    },
    /**
     * @function 获取表格数据
     */
    getTableData() {
      return this.tableData
    },
    /**
     * @function 批量开关是否显示
     * @param {Boolean} value 开关结果
     * @param {String} column 列名称
     */
    batchEvent(value, column) {
      // console.log(value);
      for(let i in this.tableData) {
        this.tableData[i][column] = value
      }
    }
  }
}
</script>